<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html, body {
            height: 100%;
        }

        body > .wrapper {
            min-height: 100%;
        }

        .content {
            padding-bottom: 50px; /* 必须使用和footer相同的高度 */
        }

        .footer {
            width: 100%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: red;
            margin-top: -50px; /* footer高度的负值 */
        }

        .clearfix:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        /*绝对底部（Sticky Footer）:当页面内容超出屏幕，页脚模块会像正常页面一样，被推到内容下方，需要拖动滚动条才能看到
         而当页面内容小于屏幕高度，页脚模块会固定在屏幕底部，就像是底边距为零的固定定位。
         html,body设置height:100%,添加额外div，类名wrapper并且设置 min-height: 100%，
         内容区域设置.content设置padding-bottom: 50px必须使用和footer相同的高度;
         将.footer 设置 margin-top：-50px其值为footer高度的负值，就能让 footer 回到屏幕底部*/
    </style>
</head>
<body>
<div class="wrapper clearfix">
    <div class="content">
        <div class="head">
            头部
        </div>
        <div class="main">
            <p>中部</p>
            <p>中部</p>
            <p>中部</p>
            <p>中部</p>
            <p>中部</p>
            <p>中部</p>
            <p>中部</p>
            <p>中部</p>
            <p>中部</p>
            <p>中部</p>
            <p>中部</p>
            <p>中部</p>
            <p>中部</p>
            <p>中部</p>
            <p>中部</p>
            <p>中部</p>
            <p>中部</p>
            <p>中部</p>
            <p>中部</p>
            <p>中部</p>
            <p>中部</p>
            <p>中部</p>
            <p>中部</p>
            <p>中部</p>
            <p>中部</p>
            <p>中部</p>
            <p>中部</p>
            <p>中部</p>
            <p>中部</p>
            <p>中部</p>
            <p>中部</p>
            <p>中部</p>
            <p>中部</p>
            <p>中部</p>
            <p>中部</p>
            <p>中部</p>
            <p>中部</p>
            <p>中部</p>
            <p>中部</p>
            <p>中部</p>
            <p>中部</p>
            <p>中部</p>
            <p>中部</p>
            <p>中部</p>
            <p>中部</p>
            <p>中部</p>
            <p>中部</p>
            <p>中部</p>

        </div>
    </div>
</div>

<div class="footer">
    尾部
</div>

</body>
</html>